<template>
  <div class="header">
    <div class="top">
      <div class="top-left">
        <div class="top-img">
          <img src="../assets/imgs/common/schoolBadge.png"
               alt="">
        </div>
        <div class="top-content">
          <div class="schoolname">四川农业大学<span>国际交流合作处（暨港澳台办公室）/国际学院</span></div>
          <div class="line"></div>
          <div class="schoolenglish">International Office of Excange and Coorperation; Office for Hongkong, Macao and Taiwan. Affairs/International College</div>
        </div>
      </div>
      <div class="top-right">
        <span class="iconfont earth">&#xe781;</span>
        <span>LANGUAGES</span>
        <span class="language">CHINESE</span>
        <span>|</span>
        <span class="language active">ENGLISH</span>
      </div>
    </div>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="nav-collapse">
          <ul class="nav-ul">
            <li v-for="(item,index) of navItems" :key="index" @click="handleNavClick(item.title)">
              <router-link :to="{name: item.title}" tag="a" class="nav-title">{{item.title}}<span class="iconfont earth">&#xe8ec;</span></router-link>
              <ul class="dropdown-ul">
                <li v-for="(subItem, subIndex) of item.children" :key="subIndex" @click.stop="handleSubNavClick(subItem.title, item.title)">
                  <router-link :to="{name: subItem.title}" tag="a">{{subItem.title}}</router-link>
                  <ul class="third-ul">
                    <li v-for="(ThirdItem, ThirdIndex) of subItem.children" :key="ThirdIndex" @click.stop="changeThirdNavClick(item.title, subItem.title, ThirdItem.title)">
                      <router-link :to="{name: ThirdItem.title}" tag="a">{{ThirdItem.title}}</router-link>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="nav-search"
             @click="handleSearchBtnClick"><span class="iconfont earth">&#xe8ef;</span></div>
        <div class="search"
             v-if="showSearchBtn">
          <input class="search-input"
                 type="text"
                 name="输入框"
                 id=""
                 placeholder="请输入内容...">
          <div class="search-submit">GO</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'HomeHeader',
  data () {
    return {
      showSearchBtn: false // 控制搜索按钮的显示与关闭
    }
  },
  computed: {
    ...mapState({
      navItems: 'navItems'
    })
  },
  methods: {
    handleSearchBtnClick () { // 搜索按钮的显示与关闭
      this.showSearchBtn = !this.showSearchBtn
    },
    handleNavClick (navTitle) { // 导航按钮单击事件
      console.log(navTitle)
      this.changeNav(navTitle)
    },
    handleSubNavClick (subTitle, navTitle) { // 子导航单击事件
      this.changeSubNav({
        'subTitle': subTitle,
        'navTitle': navTitle,
        'thirdTitle': ''
      })
    },
    changeThirdNavClick (navTitle, subTitle, thirdTitle) { // 三级导航单击事件
      this.changeThirdNav({
        'navTitle': navTitle,
        'subTitle': subTitle,
        'thirdTitle': thirdTitle
      })
    },
    ...mapMutations(['changeNav', 'changeSubNav', 'changeThirdNav'])
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  background-color: #fff;
  .top {
    width: 1398px;
    height: 110px;
    margin: 0 auto;
    display: flex;
    background-color: white;
    .top-left {
      width: 1118px;
      height: 110px;
      display: flex;
      align-items: center;
      img {
        margin: 0 20px 0 20px;
        width: 65px;
        height: 65px;
      }
      .top-content {
        .schoolname {
          color: #567f32;
          font-size: 18px;
          font-weight: 500;
          line-height: 40px;
          letter-spacing: 2px;
          text-shadow: 0 0 1px #567f32;
          border-bottom: solid 2px #eeeeee;
          span {
            margin-left: 20px;
            font-size: 18px;
            line-height: 30px;
            letter-spacing: 2px;
            color: #72c02c;
            text-shadow: 0 0 1px #72c02c;
          }
        }
        .schoolenglish {
          margin-top: 5px;
          font-size: 11px;
          color: #687074;
          letter-spacing: 2px;
        }
      }
    }
    .top-right {
      width: 280px;
      padding-top: 40px;
      line-height: 24px;
      text-align: right;
      box-sizing: border-box;
      color: #7c8082;
      span {
        margin: 0 2px;
        font-size: 13px;
      }
      .earth {
        font-size: 20px;
      }
      .active {
        color: #72c02c;
      }
      .language {
        cursor: pointer;
        transition: all 0.3s linear;
      }
      .language:hover {
        color: #72c02c;
        text-decoration: underline;
      }
    }
  }
  .navbar {
    width: 1398px;
    margin: 0 auto;
    .navbar-inner {
      position: relative;
      border: none;
      display: flex;
      justify-content: space-between;
      margin: 0 !important;
      .nav-collapse {
        width: 97%;
        .nav-ul {
          position: relative;
          left: 0;
          display: flex;
          justify-content: space-between;
          list-style: none;
          margin: 0;
          padding: 0;
          cursor: pointer;
          li {
            display: inline-block;
            &:hover .nav-title {
              color: #72c02c;
              border-bottom: solid 5px #72c02c;
            }
            // 鼠标移过的时候显示下拉菜单
            &:hover .dropdown-ul {
              visibility: visible;
              opacity: 1;
            }
            a {
              padding: 10px 4px;
              margin-right: .5px;
              letter-spacing: 1px;
              display: inline-block;
              color: #687074;
              font-size: 14px;
              text-decoration: none;
              background: white;
              box-sizing: border-box;
              border-bottom: solid 5px #fff;
              transition: all 0.5s ease-in-out;
              span {
                color: #72c02c;
              }
            }
            .active {
              color: #72c02c;
              border-bottom: solid 5px #72c02c;
            }
            // 下拉菜单先隐藏起来
            .dropdown-ul {
              visibility: hidden;
              opacity: 0;
              padding: 0;
              border: 0;
              margin-top: -5px;
              border-top: solid 5px #72c02c;
              z-index: 9999 !important;
              position: absolute;
              top: 100%;
              list-style: none;
              background-color: #fff;
              transition: all 0.5s ease-in-out;
              li {
                display: block;
                &:hover .third-ul {
                  visibility: visible;
                  opacity: 1;
                }
                a {
                  font-size: 13px;
                  padding: 6px 15px;
                  border-bottom: solid 1px #eee;
                  font-weight: 400;
                  display: block;
                  line-height: 32px;
                  white-space: nowrap;
                  &:hover {
                    background-color: #72c02c;
                    color: white;
                  }
                }
                .third-ul {
                  visibility: hidden;
                  opacity: 0;
                  padding: 0;
                  position: absolute;
                  left: 100%;
                  top: 0;
                  transition: all .3s linear;
                }
              }
            }
          }
        }
      }
      .nav-search {
        width: 3%;
        height: 44px;
        color: #aaa;
        cursor: pointer;
        background: #f7f7f7;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 2px solid #aaa;
        &:hover {
          color: #72c02c;
          border-bottom: 2px solid #72c02c;
        }
        span {
          font-size: 22px;
        }
      }
      .search {
        position: absolute;
        z-index: 99;
        width: 350px;
        height: 50px;
        right: 22px;
        top: 44px;
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        background-color: #fcfcfc;
        .search-input {
          width: 260px;
          height: 25px;
          font-size: 14px;
          letter-spacing: 1px;
          padding-left: 12px;
        }
        .search-submit {
          width: 42px;
          height: 31px;
          cursor: pointer;
          background-color: #72c02c;
          color: #fff;
          text-align: center;
          line-height: 31px;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
